<template>
  <div class="cml-module cml-monitor">
    <div class="cml-module-title">
      <div class="cml-module-title-t">
        <p class="cml-module-title-text">
          <img src="../../source/img/icon-dev.svg"
            alt="icon" />
          <span>{{ $t('cmlpanel.performance') }}</span>
        </p>
      </div>
      <div class="cml-monitor-tab">
        <a href="javascript:void(0)"
          :class="[
            'monitoring-FPS',
            'monitoring',
            monitorPanelId == 0 ? 'active' : ''
          ]"
          @click="changePanel(0)">
          FPS
        </a>
        <a href="javascript:void(0)"
          :class="[
            'monitoring-MS',
            'monitoring',
            monitorPanelId == 1 ? 'active' : ''
          ]"
          @click="changePanel(1)">
          MS
        </a>
        <a href="javascript:void(0)"
          :class="[
            'monitoring-MB',
            'monitoring',
            monitorPanelId == 2 ? 'active' : ''
          ]"
          @click="changePanel(2)">
          MB
        </a>
      </div>
    </div>
    <div class="cml-monitor-box">
      <div class="cml-monitoring-panel"
        ref="monitoring-panel"></div>
      <!-- <div class="monitoring-panel-line"></div> -->
    </div>
  </div>
</template>
<script>
import Stats from '../../util/stats.js'
import { mapState, mapMutations } from 'vuex'
import { throttle } from 'lodash-es'
export default {
  name: 'Monitor',
  components: {},
  data() {
    return {
      monitor: 'monitor',
      prevFps: 0,
      prevMb: 0,
      fpsSender: throttle(this.sendFpsInfo, 10 * 1000)
    }
  },
  computed: {
    ...mapState('cmlpanel', ['monitorPanelId']),
    ...mapState('env', ['fps'])
  },
  mounted() {
    this.init()
  },
  updated() {},
  methods: {
    ...mapMutations('cmlpanel', ['setMonitorPanelId']),
    ...mapMutations('env', ['setFps', 'setCurrentMemory', 'setFpsRange']),
    sendFpsInfo(fps, mb, tmb) {
      if (app.adminServer.ws && app.adminServer.ws.readyState === 1) {
        app.adminServer.ws
          .sendCustomize({ fps, mb, tmb, routeName: this.$route.name }, 'FPS')
          .catch(() => undefined)
      }
    },
    // 初始化
    init() {
      this.stats = new Stats(this.clickPanelCallback)
      let isFirst = true
      this.stats.info = (fps, minFps, maxFps, ms, mb, tmb) => {
        // added by WUYAX @2022-01-11
        this.fpsSender(fps, mb, tmb)
        if (app.adminServer.ws && app.adminServer.ws.readyState === 1) {
          app.adminServer.ws.sendRTS({fps, ms, mb, tmb}, false).catch(() => undefined)
        }
        // console.log(fps,minFps, maxFps,)
        let memory = {
          mb: mb ? mb : 1,
          unit: 'MB'
        }
        if (mb > 1024) {
          memory.mb = (mb / 1024).toFixed(2)
          memory.unit = 'GB'
        }
        if (isFirst) {
          this.setCurrentMemory(memory)
          this.setFps(fps)
          this.setFpsRange([minFps, maxFps])
          isFirst = false
        } else {
          if (Math.abs(this.prevMb - mb) >= 10) {
            this.setCurrentMemory(memory)
            this.prevMb = mb
          }
          if (Math.abs(this.prevFps - fps) > 5) {
            this.setFps(fps)
            this.setFpsRange([minFps, maxFps])
            this.prevFps = fps
          }
        }
      }
      let me = this
      this.stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
      this.$refs['monitoring-panel'].appendChild(this.stats.dom)
      requestAnimationFrame(function loop() {
        me.stats.update()
        requestAnimationFrame(loop)
      })
    },
    // 切换监控状态
    changePanel(i) {
      this.stats.showPanel(i)
      this.setMonitorPanelId(i)
    },
    // 点击monitor回调函数
    clickPanelCallback(mode) {
      this.setMonitorPanelId(mode)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/panel-var.scss';
@import '../../style/panel-mixin.scss';

@mixin shadow {
  opacity: 1;
  text-shadow: 1px 1px 10px currentColor;
}
.cml-monitor {
  .cml-module-title {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    // border-bottom: 2px solid rgba(193, 255, 251, .2);
    .#{$prefix-s}-module-title-t {
      color: $text-color;
      // padding-top: 10px;

      font-size: $fz-sm;
      // font-weight: bold;
      height: 48px;
      @include flex(row, space-between);
      .#{$prefix-s}-module-title-text {
        @include flex(row, flex-start);
        img {
          width: 18px;
          margin-right: 8px;
        }
      }
    }
    .cml-monitor-tab {
      display: flex;
      align-items: center;
      justify-content: space-between;

      width: 100px;
      // padding-top: 10px;
    }
    .monitoring-MS {
      color: #41c47b;
      &:hover,
      &:focus,
      &.active {
        @include shadow();
      }
    }
    .monitoring-MB {
      color: #45a3ca;
      &:hover,
      &:focus,
      &.active {
        @include shadow();
      }
    }
    .monitoring-FPS {
      color: #62c6d1;
      &:hover,
      &:focus,
      &.active {
        @include shadow();
      }
    }
    .monitoring {
      opacity: 0.4;
      // font-family: 'time-hy';

      transition: all 0.2s ease-in;

      cursor: pointer;
    }
  }
  .cml-monitor-box {
    position: relative;

    width: 262px;
    height: 82px;
    box-sizing: border-box;
    border: 0 none;
    margin: 0 auto;
    .cml-monitoring-panel {
      position: absolute;
      top: 0;

      width: 260px;
      height: 80px;

      background: #000c;
      background-image: linear-gradient(transparent 9px, #091d2e 0),
        linear-gradient(90deg, #091d2e 1px, transparent 0);
      background-size: 10px 10px;
      border: 1px solid #091d2e;
      box-sizing: content-box;
    }
  }
}
</style>
